import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';
import qs from 'qs';

import { addTab } from '@/utils/utils';
import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Button,
  Cascader,
  Table,
  Divider,
} from 'antd';


import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { pathname } = window.location;

interface TableProps extends FormComponentProps {
  dispatch: Dispatch;
  dataInfo: any;
  INITINFO: any;
  screen: string;
  loading: boolean;
}

@connect(({
  tookManagementList: { dataInfo },
  common: { INITINFO },
  loading,
  global: { screen },
}: any) => ({
  dataInfo,
  INITINFO,
  screen,
  loading: loading.effects['tookManagementList/fetch'],
}))

class TookManagementElem extends React.Component<TableProps> {
  columns: any = [
    {
      title: '序号',
      dataIndex: 'index',
    },
    {
      title: '物流中心',
      dataIndex: 'logis_name',
    },
    {
      title: '日期',
      dataIndex: 'date',
    },
    {
      title: '派件数',
      dataIndex: 'send_number',
    },
    {
      title: '派件收入(元)',
      dataIndex: 'send_price',
    },
    {
      title: '揽件数',
      dataIndex: 'number',
    },
    {
      title: '揽件收入(元)',
      dataIndex: 'income',
    },
    {
      title: '揽件利润(元)',
      dataIndex: 'profits',
    },
    {
      title: '应上交金额(元)',
      dataIndex: 'should_price',
    },
    {
      title: '财务实收金额(元)',
      dataIndex: 'actual_price',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '操作',
      fixed: 'right',
      render: (val: any, record: any) => (
        <>
          <span
            className="operLink"
            onClick={() => this.handleSeeDetail(record)}
          >查看
          </span>
          <Divider type="vertical" />
          <span
            className="operLink"
            onClick={() => this.handleSeeDetail(record)}
          >导出
          </span>
        </>
      ),
    },
  ]

  componentDidMount() {
    this.fetchAddressList();
  }

  fetchAddressList = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'common/fetchAddressList' });
  }

  handleSeeDetail = ({ name, logisId }: any) => {
    const { dispatch } = this.props;
    addTab(dispatch, {
      name: `${name}-详情`,
      url: `/basic/logisticsCenter/list/dataClear/detail?logisId=${logisId}&name=${name}`,
    });
  }

  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (errors) return;

      const query = { pageIndex: 1, pageSize: 10, ...values };
      const { dispatch } = this.props;
      addTab(dispatch, {
        name: '物流中心',
        url: `${pathname}?${qs.stringify(query)}`,
        isTopMenu: true,
      });
    });
  }

  handleReset = () => {
    const { form: { resetFields } } = this.props;
    resetFields();

    const { dispatch } = this.props;
    addTab(dispatch, {
      name: '物流中心',
      url: pathname,
      isTopMenu: true,
    });
  }

  renderSearchFormElem() {
    const {
      form: { getFieldDecorator },
      INITINFO: { addressList },
    } = this.props;

    return (
      <Form className="tableListForm" onSubmit={this.handleSearch}>
        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Form.Item label="物流中心" colon={false}>
              {getFieldDecorator('logis')(
                <Input placeholder="请输入" />,
              )}
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <Form.Item label="　省市区" colon={false}>
              {getFieldDecorator('date')(
                <Cascader options={addressList} placeholder="请选择" />,
              )}
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <Form.Item label="　　日期" colon={false}>
              {getFieldDecorator('express')(
                <DatePicker placeholder="请选择" style={{ width: '100%' }} />,
              )}
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <Form.Item label="　　状态" colon={false}>
              {getFieldDecorator('type')(
                <Select placeholder="请选择">
                  <Option value={1}>付款方式1</Option>
                  <Option value={2}>付款方式2</Option>
                  <Option value={3}>付款方式3</Option>
                </Select>,
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={12} justify="end">
          <Col md={8} sm={24}>
            <div className="flexFeView">
              <Button
                type="primary"
                htmlType="submit"
                className="smallButton"
              >
                查询
              </Button>
              <Button
                type="primary"
                className="addButton smallButton marginL16"
                onClick={this.handleReset}
              >
                重置
              </Button>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { loading, screen } = this.props;
    const dataSource: any = [];

    if (screen === 'sm' || screen === 'lg') {
      delete this.columns[this.columns.length - 1].fixed;
    } else if (screen === 'md') {
      this.columns[this.columns.length - 1].fixed = 'right';
    }

    return (
      <>
        <PageHeader />

        <Card bordered={false} className="searchForm paddingB12">
          {this.renderSearchFormElem()}
        </Card>

        <Card bordered={false} className="tableList">
          <Table
            rowKey="id"
            tableLayout="fixed"
            className="statementTable tableHeight60"
            columns={this.columns}
            dataSource={dataSource}
            loading={loading}
            scroll={{ x: 1500 }}
          />
        </Card>

      </>
    );
  }
}

export default Form.create<TableProps>()(TookManagementElem);
